/*
This is the main entry point for all styles for the web app.
It should import all component stylesheets.
*/

// Use duplicate selectors for the light-theme
// stylelint-disable no-duplicate-selectors

@import '../../branded/src/global-styles/index.scss';

// stylelint-disable-next-line selector-max-id
html,
body,
#root {
    height: 100%;
}

// Document highlight is the background color for tokens which are matched with
// a result from a document highlight provider. e.g. for references of the token
// currently being hovered over.
//
// Note that we define this before selection highlights so that it will override
// the styles of symbol that has both classes applied.
.sourcegraph-document-highlight {
    background-color: var(--secondary);
}

// Selection highlight is the background color for matched/highlighted tokens,
// e.g. for search results, for identifying the token currently being hovered over,
// or identifying the token the references panel is toggled for
.selection-highlight,
.selection-highlight-sticky {
    background-color: var(--mark-bg);
}

.app {
    &__error {
        > hr {
            margin-top: 1rem;
            margin-bottom: 1rem;
            border-color: #93a9c8;
        }

        &-text {
            margin-top: 1rem;
            background-color: #233043;
            padding: 1rem;
        }
    }
}

.spacer {
    flex: 1;
}

.flex-1 {
    flex: 1;
}

.flex-bounded {
    flex: 1;
    min-width: 0;
}

.flex-shrink-past-contents {
    flex-shrink: 1;
    min-width: 0;
}

// Pages
@import './Layout';
@import './api/ApiConsole';
@import './extensions/ExtensionsArea';
@import './extensions/extension/ExtensionArea';
@import './extensions/components/StatusBar';
@import './extensions/components/ActionItemsBar';
@import './global/GlobalAlerts';
@import './global/GlobalDebug';
@import './global/Notices';
@import './savedSearches/index';
@import './search/input/SearchPage';
@import './search/SearchConsolePage';
@import './search/ShepherdTour';
@import './repogroups/RepogroupPage';
@import './search/queryBuilder/index';
@import './searchContexts/index';
@import './search/results/SearchResultsInfoBar';
@import './search/results/progress/StreamingProgress.scss';
@import './settings/MonacoSettingsEditor';
@import './settings/SettingsFile';
@import './site-admin/init/SiteInitPage';
@import './site-admin/SiteAdmin';
@import './tree/Tree';
@import './nav/GlobalNavbar';
@import './nav/NavLinks';
@import './auth/ResetPasswordPage';
@import './auth/SignInPage';
@import './auth/SignUpPage';
@import './auth/OrDivider';
@import './repo/GitReferenceTag';
@import './repo/RepoContainer';
@import './repo/FilePathBreadcrumbs.scss';
@import './repo/settings/RepoSettingsArea';
@import './repo/actions/InstallBrowserExtensionPopover.scss';
@import './repo/actions/InstallBrowserExtensionAlert.scss';
@import './components/CopyableText';
@import './components/FilteredConnection';
@import './components/SaveToolbar';
@import './components/HeroPage';
@import './components/ModalPage';
@import './components/RadioButtons';
@import './components/Dialog';
@import './components/CtaBanner.scss';
@import './user/settings/UserSettingsArea';
@import './site-admin/SiteAdminAlert';
@import './site/DockerForMacAlert';
@import './user/UserAvatar';
@import './user/area/UserArea';
@import './org/OrgsArea';
@import './components/Badge';
@import './components/Collapsible';
@import './components/Timeline';
@import './marketing/SurveyPage';
@import './components/branding/BrandLogo';
@import './components/SingleValueCard';
@import './components/SearchResult';
@import './components/SearchResultMatch';
@import './components/diff/FileDiffNode';
@import './components/externalServices/AddExternalServicesPage';
@import './components/Sidebar';
@import '../../branded/src/components/panel/views/FileLocations';
@import '../../branded/src/components/LoaderInput';

@import '../../shared/src/index';

:root {
    // Skip Reach UI styles. See https://reacttraining.com/reach-ui/styling/.
    --reach-menu-button: 1;
    --reach-accordion: 1;
    // Media breakpoints
    --media-sm: 576px;
    --media-md: 768px;
    --media-lg: 992px;
    --media-xl: 1200px;
}
